<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <title>收集表单数据</title>
</head>
<body>
    <style>
        img{
            width: 500px;
        }
        /* 离开的起点 进入的重点*/
        .city-leave,.city-enter-to{
            opacity: 1;
            transform: scale(1) rotate(180deg);
        }
        /* 离开的终点，进入的起点 */
        .city-leave-to,.city-enter{
            opacity: 0;
            transform: scale(0.2) rotate(180deg);
        }
        /* 离开中，进入中 */
        .city-leave-active,.city-enter-active{
            transition: 1s all linear;
        }
    </style>
   <div id="root">
        <button @click='isShow=!isShow'>切换</button><br><br>
        <transition name='city'>
            <img src="../img/城市.jpg" v-show='isShow'>
        </transition>
   </div>
   <script>
       new Vue({
           el:'#root',
           data:{
            isShow:true,
           },
           methods:{
                death(){
                    //vm还在但是不能用了，还在但是不监听了，这是销毁
                    this.$destory();
                }
           },
       });
   </script>
</body>
</html>